body {

    direction: rtl;
}

a {
    text-decoration: none;
    color: inherit;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ebhro3-hero {

    /* max-height: 65vh; */

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(var(--ebhro3-overlay),

            var(--ebhro3-overlay)),

        url("/img/bg.png") center / 100vw 100% fixed;

    background-repeat: no-repeat;
    padding-block: var(--ebhro3-space-md);
    width: 100%;
}


.about-hero {

    max-height: fit-content;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--ebhro3-primary);

    background-repeat: no-repeat;
    padding-block: var(--ebhro3-space-md);
    width: 100%;
}



.ebhro3-container {

    max-width: var(--ebhro3-container-width);

    width: 100vw;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: start;
    gap: var(--ebhro3-space-md);

    /* border: 1px solid red; */

}



.ebhro3-content {

    width: 100%;

    /* border: 1px solid blue; */

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--ebhro3-space-md);

    align-items: center;

    justify-content: center;

    padding-inline: var(--ebhro3-space-sm);
}

.ebhro3-content-about {

    width: 100%;

    /* border: 1px solid blue; */

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--ebhro3-space-md);

    align-items: center;

    justify-content: center;

    padding-inline: var(--ebhro3-space-sm);
}

.ebhro3-content-about .ebhro3-title {
    color:

        var(--ebhro3-secondary);
}

.ebhro3-content-about .ebhro3-slog {
    color:

        var(--ebhro3-primary);
}

.about-hero .ebhro3-description {

    color: var(--ebhro3-white);

}

.ebhro3-text-block {

    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;

    gap: var(--ebhro3-space-sm);

    /* border: 1px solid red; */

}

.ebhro3-content .ebhro3-title {
    color: var(--ebhro3-white);
}

.ebhro3-title {

    font-size:

        clamp(1.8rem,

            4.5vw,

            3rem);

    font-weight:

        clamp(600, 2vw, 900);



}

.ebhro3-slog {

    font-size:

        clamp(1.2rem,

            3.5vw,

            2.5rem);

    font-weight: bold;



}

.ebhro3-content .ebhro3-slog {
    color: var(--ebhro3-helper);
}

.ebhro3-desc {

    font-size:

        clamp(1rem,

            2.3vw,

            2.3rem);

    font-weight: 700;

    color:

        var(--ebhro3-secondary);

}

.ebhro3-title span {

    color:

        var(--ebhro3-secondary);

}

.ebhro3-description {

    font-size: clamp(1.1rem, 1.5vw, 1.4rem);


    max-width: 520px;

}

.ebhro3-content .ebhro3-description {

    color: var(--ebhro3-white);

}

.ebhro3-list {
    display: flex;

    flex-direction: column;

    gap: var(--ebhro3-space-xs);

    padding-right: var(--ebhro3-space-lg);

    font-weight: clamp(500, 2vw, 700);

}


.ebhro3-list-item {
    font-size: var(--ebhro3-fs-lg);

}

.about-hero .ebhro3-list-item {

    color: var(--ebhro3-white);

}

.ebhro3-content .ebhro3-list-item {

    color: var(--ebhro3-white);

}



.ebhro3-image-block {

    margin: 0% auto;

    display: flex;

    justify-content: center;

    position: relative;

    /* background-color: var(--ebhro3-white); */

    border-radius:

        var(--ebhro3-br-lg);
}



.ebhro3-image-wrapper {

    position: relative;
    border-radius:

        var(--ebhro3-br-lg);
}



.ebhro3-image {

    width: 100%;

    max-width: 420px;
    max-height: 300px;

    /* aspect-ratio: 1 / 1; */
    border-radius:

        var(--ebhro3-br-lg);

    animation:

        ebhro3-floating 4s ease-in-out infinite;

}
.ebhro3-image-logo {

    width: 100%;

    max-width: 420px;
    max-height: 100px;

    /* aspect-ratio: 1 / 1; */
    border-radius:

        var(--ebhro3-br-lg);

    animation:

        ebhro3-floating 4s ease-in-out infinite;

}

@keyframes ebhro3-floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-14px);

    }

    100% {

        transform: translateY(0);

    }

}


.ebhro3-floating-circle {

    position: absolute;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background:

        var(--ebhro3-secondary);

    opacity: .25;

    top: -10px;

    left: 0px;

    animation:

        ebhro3-rotate 18s linear infinite;

}



.ebhro3-floating-reverse {

    bottom: -10px;

    right: 0px;

    top: auto;

    left: auto;

    animation-direction: reverse;

}



@keyframes ebhro3-rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@media (max-width:768px) {
    .ebhro3-content {
        grid-template-columns: 1fr;
    }

    .ebhro3-content-about {
        grid-template-columns: 1fr;
    }

}